<template>
  <div class="presentationr">
    <vheader pageTitle="提现记录"></vheader>
    <div class="presentationr-top" id="js_top">
      <span>提现单号 | 时间</span>
      <span>金额(元)</span>
      <span>状态</span>
    </div>
    <div class="presentationr-list" v-scroll="onScroll">
      <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="5">
        <li class="border-1px" v-for="item in dataList">
          <span>{{ item.sysOrder }} {{ item.createDate }}</span>
          <span>{{ item.drawMoney }}</span>
          <span
            @click="viewProgress(item)"
            :style="{color: item.status === 3 ? '#666' : '#3fadf9'}">{{ item.status | statusMaptoText }}</span>
        </li>
      </ul>
      
      <list-loading
        :allLoaded="allLoaded" v-show="!noData"></list-loading>
        <no-data v-show="noData"></no-data>
    </div>
    <mt-popup v-model="popupShow" popup-transition="popup-fade">
      <div class="progress">
        <div class="progress-content" v-if="!progressLoading">
          <div class="icon-err" @click="close"></div>
          <h6>提现进度</h6>
          <p>您有一笔<span>{{ currentItem.drawMoney }}元</span>的提现申请正在处理中...</p>
          <span>{{ progressData.bankName }}（尾号{{ progressData.bankCardNo }}）</span>
          <div class="progress-bar">
            <img :src="require('assets/tixianjindu001@3x.png')" alt="">
          </div>
          <div class="progress-state">
            <span>申请中</span>
            <span>处理中</span>
            <span style="color: #999">提现成功</span>
          </div>
          <div class="progress-line border-1px"></div>
          <div class="progress-ver-bar">
            <img :src="require('assets/tixianjindu002@3x.png')" alt="">
            <ul>
              <li>
                <span>分秒金融处理中</span>
                <strong>{{ currentItem.createDate }}</strong>
              </li>
              <li>
                <span>银行处理中</span>
                <strong>{{ currentItem.createDate }}</strong>
              </li>
              <li>
                <span>处理结果</span>
                <strong></strong>
              </li>
            </ul>
          </div>
        </div>
        <div class="progress-loading" v-else>
          <mt-spinner type="snake" color="#3fadf9"></mt-spinner>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import listLoading from 'components/common/listLoading'
  import noData from 'components/common/noData'
  import { Popup, Spinner, Toast } from 'mint-ui'

  export default {
    data () {
      return {
        pageSize: 10,
        loading: false,
        pageOffset: 1,
        totalPage: 1,
        allLoaded: false,
        dataList: [],
        noData: false,
        popupShow: false,
        acctKey: null,
        currentItem: {},
        // 设置一些初始化的属性，加载数据 -> render的时候未找到属性的错误
        progressData: {
          trdAmt: 0,
          bankName: 0,
          trdDate: '',
          succDate: '',
          endNo: ''
        },
        progressLoading: true
      }
    },
    methods: {
      loadMore () {
        if (this.allLoaded) {
          return
        }
        this.loading = true
        const userAcctKey = this.getUserCookie('acctKey')
        this.$http.get(`/api/member/MemberDrawList?acctKey=${userAcctKey}&currentPage=${this.pageOffset}&numPerPage=${this.pageSize}`)
          .then((res) => {
            if (res.data.success) {
              res.data.data.list.forEach((item) => {
                this.dataList.push(item)
              })
              console.log(res.data.data)
              this.loading = false
              this.totalPage = res.data.data.totalPage
              console.log(this.pageOffset, this.totalPage)
              if (this.pageOffset === this.totalPage || this.totalPage === 0) {
                this.allLoaded = true
                return
              }
              this.pageOffset++
            } else if (res.data.retCode === '1002') {
              // 没有数据
              this.allLoaded = true
              this.noData = true
            }
          })
      },
      onScroll (e, position) {
        const topEle = document.getElementById('js_top')
        if (position.scrollTop === 0) {
          topEle.classList.remove('active')
        }
        if (position.scrollTop > 0) {
          topEle.classList.add('active')
        }
      },
      viewProgress (item) {
        this.currentItem = {
          drawMoney: item.drawMoney,
          createDate: item.createDate
        }
        // 已到账
        if (item.status === '1' || item.status === '2') {
          return
        }
        this.popupShow = true
        this.progressLoading = true
        this.$http.get('/api/member/drawProcess', {
          params: {
            acctKey: this.acctKey,
            sysOrder: item.sysOrder
          }
        })
        .then((res) => {
          if (res.data.success) {
            this.progressData = res.data.data
            this.progressLoading = false
          } else {
            this.progressLoading = false
            this.popupShow = false
            Toast(res.data.msg)
          }
        })
        .catch((err) => {
          this.popupShow = false
          this.progressLoading = false
          console.log(err) // 网络错误时的处理
        })
      },
      close () {
        this.popupShow = false
      }
    },
    filters: {
      statusMaptoText (status) {
        const statusNum = Number(status)
        const statusValue = ['查看进度', '已到帐', '提现失败']
        return statusValue[statusNum]
      }
    },
    created () {
      this.acctKey = this.$cookie.get('acctKey')
    },
    components: {
      vheader,
      listLoading,
      noData,
      mtPopup: Popup,
      mtSpinner: Spinner
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .presentationr {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    &-top {
      flex: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 108px;
      padding: 0 30px;
      background: $base-fff;
      &.active {
        box-shadow: 0 2px 3px 1px #e3e3e3;
      }
      span {
        font-size: 32px;
        text-align: right;
        color: $base-999;
      }
      &>span:nth-child(1) {
        text-align: left;
        width: 280px;
      }
      &>span:nth-child(2) {
        width: 150px;
      }
      &>span:nth-child(3) {
        width: 260px;
      }
    }
    &-list {
      overflow: auto;
      -webkit-overflow-scrolling : touch;
      ul {
        li {
          height: 108px;
          margin: 0 30px;
          @include border-1px(#{$base-e5e5e5});
          font-size: 28px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: $base-666;
          text-align: right;
          &>span:nth-child(1) {
            text-align: left;
            width: 280px;
          }
          &>span:nth-child(2) {
            width: 150px;
            color: $base-ff6c00;
            font-size: 28px;
          }
          &>span:nth-child(3) {
            width: 260px;
          }
        }
      }   
    }
    .progress {
      position: relative;
      box-sizing: border-box;
      width: 690px;
      min-height: 604px;
      padding: 50px;
      border-radius: 10px;
      font-size: 26px;
      background: $base-fff;
      &-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .icon-err {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 30px;
        color: $base-e5e5e5;
      }
      h6 {
        margin-bottom: 50px;
        text-align: center;
        font-size: 30px;
        color: $base-666;
      }
      p {
        font-size: 26px;
        margin-bottom: 20px;
        span {
          font-size: 28px;
          color: $base-ff6c00;
        }
      }
      &-content {
        &>span {
          color: $base-999;
        }
      }
      &-bar {
        font-size: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 60px 0 30px 0;
        img {
          width: 470px;
        }
      }
      &-state {
        display: flex;
        padding: 0 15px 0 26px;
        margin-bottom: 50px;
        justify-content: space-between;
        color: $base-ff6c00;
        font-size: 26px;
      }
      &-line {
        width: 100%;
        @include border-1px(#e5e5e5);
      }
      &-ver-bar {
        display: flex;
        padding-top: 50px;
        img {
          height: 130px;
        }
        ul {
          margin-left: 20px;
          li {
            display: flex;
            justify-content: space-between;
            font-size: 24px;
            color: $base-999;
            margin-bottom: 30px;
            span {
              margin-right: 50px;
            }
            strong {
            }
          }
        }
      }
    }
  }
</style>
